<template>
  <div class="app-container home">
    <el-row>
      <el-card>
        <el-col :xs="24" :lg="16" :md="16" >
          <div class="car-left">
            <el-row>
              <div>
                <el-col :xs="24" :lg="24" :md="24">
                  <div class="text">
                    <h4>早安，{{this.user.nickName}}， 请开始您一天的工作吧！</h4>
                    <p class="tips-text">
                      <i class="el-icon-sunny el-icon"></i>
                      <span>{{this.province}}{{this.city}} 
                          <!--
                          今日{{this.forecast[0].type}}，{{this.forecast[0].fengxiang}} {{this.forecast[0].low}} - {{this.forecast[0].high}}，{{this.ganmao}}
                          -->
                        </span>
                    </p>
                  </div>
                </el-col>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :lg='8' :md="8">
          <div class="car-right">
            <el-row>
              <el-col :span="8"
                ><div class="car-item">
                  <span class="flow"><i class="el-icon-s-grid"></i></span>
                  <span>今日流量 </span>
                  <b>13260</b>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="car-item">
                  <span class="user-number">
                    <i class="el-icon-s-custom"></i>
                  </span>
                  <span>总用户 </span>
                  <b>48286</b>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="car-item">
                  <span class="feedback">
                    <i class="el-icon-star-on"></i>
                  </span>
                  <span>好评率 </span>
                  <b>98%</b>
                </div></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-card>
    </el-row>

      <el-row :gutter="20">
        <el-col
          :span="4"
          v-for="(card, key) in toolCards"
          :key="key"
          @click.native="toTarget(card.name)"
          :xs="8"
        >
          <el-card shadow="hover" class="grid-content">
            <i :class="card.icon" :style="{ color: card.color }"></i>
            <p>{{ card.label }}</p>
          </el-card>
        </el-col>
      </el-row>
    <el-row>
        <el-col :span="24">
        <el-card>
          <div slot="header"><span>待办任务</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div class="cell">任务名称</div></th>
                  <th class="is-leaf"><div class="cell">发起人</div></th>
                  <th class="is-leaf"><div class="cell">发起时间</div></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(todo, key) in todoList">
                  <td><div class="cell">[{{todo.processDefinitionName}}] {{todo.varMap.businessMap.contentName}} 需要您审批！</div></td>
                  <td><div class="cell">{{todo.varMap.userMap.applyUserName}}</div></td>
                  <td><div class="cell">{{todo.createTime}}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card>
          <div slot="header"><span>事件提醒</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div class="cell">事件名称</div></th>
                  <th class="is-leaf"><div class="cell">提醒时间</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div class="cell">生产作业指导书第1版已更新,请查阅!</div></td>
                  <td><div class="cell" >2021-04-10</div></td>
                </tr>
                <tr>
                  <td><div class="cell">生产作业指导书第2版已更新,请查阅!</div></td>
                  <td><div class="cell" >2021-04-10</div></td>
                </tr>
                <tr>
                  <td><div class="cell">生产作业指导书第3版已更新,请查阅!</div></td>
                  <td><div class="cell" >2021-04-10</div></td>
                </tr>
                <tr>
                  <td><div class="cell">生产作业指导书第4版已更新,请查阅!</div></td>
                  <td><div class="cell" >2021-04-10</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
     </el-row>
  </div>
</template>
<style scoped>
.el-card {
    margin-top:10px;
}
</style>
<script>
import { listTodo} from "@/api/workflow/todo";
import { getUserProfile } from "@/api/system/user";
// import musicPlayer from "./component/musicPlayer";
// import TodoList from "./component/todoList";
// import { mapGetters } from "vuex";
export default {
  name: "Dashboard",
  data() {
    return {
        // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      province:"",
      city:"",
      ganmao:"",
      forecast:[],
      // 待办任务表格数据
      todoList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      user: {},
      
      toolCards: [
        {
          label: "用户管理",
          icon: "el-icon el-icon-monitor",
          name: "/system/user",
          color: "#ff9c6e",
        },
        {
          label: "角色管理",
          icon: "el-icon el-icon-setting",
          name: "/system/role",
          color: "#69c0ff",
        },
        {
          label: "菜单管理",
          icon: "el-icon el-icon-menu",
          name: "/system/menu",
          color: "#b37feb",
        },
        {
          label: "代码生成器",
          icon: "el-icon el-icon-cpu",
          name: "/tool/gen",
          color: "#ffd666",
        },
        {
          label: "表单生成器",
          icon: "el-icon el-icon-document-checked",
          name: "/tool/build",
          color: "#ff85c0",
        },
        {
          label: "关于我们",
          icon: "el-icon el-icon-user",
          name: "about",
          color: "#5cdbd3",
        },
      ],
    };
  },
  computed: {
    
  },
  created(){
      this.getUser();
      this.getList();
  },
  components: {
    // musicPlayer, //音乐播放器
    // TodoList, //TodoList
    // RaddarChart, //雷达图
    // stackMap, //堆叠图
    // Sunburst, //旭日图
  },
  methods: {
    toTarget(name) {
      this.$router.push(name);
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.province = response.province;
        this.city = response.city;
        this.ganmao = response.ganmao;
        this.forecast = response.forecast;
      });
    },
    /** 查询待办任务列表 */
    getList() {
      this.loading = true;
      listTodo(this.queryParams).then(response => {
        this.todoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big {
  margin: 100px 0 0 0;
  padding-top: 0;
  background-color: rgb(243, 243, 243);
  padding-top: 15px;
  .top {
    width: 100%;
    height: 360px;
    margin-top: 20px;
    overflow: hidden;
    .chart-container {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: #fff;
    }
  }
  .mid {
    width: 100%;
    height: 380px;
    .chart-wrapper {
      height: 340px;
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .bottom {
    width: 100%;
    height: 300px;
    // margin: 20px 0;
    .el-row {
      margin-right: 4px !important;
    }
    .chart-player {
      width: 100%;
      height: 270px;
      padding: 10px;
      background-color: #fff;
    }
  }
}
</style>
